<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap漂亮的垂直手风琴列表效果库</title>
  <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
  <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
  <style type="text/css">
    a:hover, a:focus { text-decoration: none; outline: none; }
    #accordion { padding-right: 24px; padding-left: 24px; z-index: 1; }
    #accordion .panel { border: none; box-shadow: none; }
    #accordion .panel-heading { padding: 0; border-radius: 0; border: none; }
    #accordion .panel-title { padding: 0; }
    #accordion .panel-title a { display: block; font-size: 16px; font-weight: bold; background: #e16b47; color: #f7c59f; padding: 15px 25px; position: relative; margin-left: -24px; transition: all 0.3s ease 0s; }
    #accordion .panel-title a.collapsed { background: #f7c59f; color: #e16b47; margin-left: 0; transition: all 0.3s ease 0s; }
    #accordion .panel-title a:before { content: ""; border-left: 24px solid #e16b47; border-top: 24px solid transparent; border-bottom: 24px solid transparent; position: absolute; top: 0; right: -24px; transition: all 0.3s ease 0s; }
    #accordion .panel-title a.collapsed:before { border-left-color: #f7c59f; }
    #accordion .panel-title a:after { content: "\f106"; font-family: 'FontAwesome'; position: absolute; top: 30%; right: 15px; font-size: 18px; color: #f7c59f; }
    #accordion .panel-title a.collapsed:after { content: "\f107"; color: #e16b47; }
    #accordion .panel-collapse { position: relative; }
    #accordion .panel-collapse.in:before { content: ""; border-right: 24px solid #f7c59f; border-bottom: 18px solid transparent; position: absolute; top: 0; left: -24px; }
    #accordion .panel-body { font-size: 14px; color: #333; background: #e4e4e4; border-top: none; z-index: 1; }
  </style>
</head>
<body>
          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Java</a> </h4>
              </div>

              <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">

                </div>
              </div>

            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">前端</a> </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">

                </div>
              </div>
            </div>
          </div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
</body>
</html>